import { Fragment, memo, useCallback } from 'react';
import type { FC } from 'react';
import styles from './index.module.less';
import NavMenuGroup from '../NavMenuGroup';
import Divider from '../Divider';
import type { NavMenu as NavMenuTypes } from './typings';

const NavMenu: FC<NavMenuTypes.Props> = (props) => {
  const { items, flat, activeId, onActiveIdChange } = props;
  const onItemClicked = useCallback((id: number, themeColor: string, title: string) => {
    onActiveIdChange({
      id,
      themeColor,
      title
    });
  }, []);
  return (
    <div className={styles.container} style={{ height: flat ? '100%' : undefined }}>
      {items.map((item, index, arr) => (
        <Fragment key={item.id}>
          <NavMenuGroup
            id={item.id}
            items={item.items}
            activeId={activeId}
            onItemClicked={onItemClicked}
            removable={item.removable}
          />
          {index !== arr.length - 1 ? <Divider color="#e8e8e8" /> : null}
        </Fragment>
      ))}
    </div>
  );
};

export default memo(NavMenu);
